<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="content-row">
        <label>上传照片：</label>
        <input type="file" id="fileImg">
    </div>
    <!-- 照片预览区域 -->
    <div class="right-info">
        <div class="del">✖</div>
        <div class="image-frame">
            <img src="./images/default.jpeg" alt="">
        </div>
    </div>
    <script>
        function http(url, type, data) {
            return new Promise(function (success, reject) {
                $.ajax({
                    url,
                    type,
                    data,
                    success,
                })
            })

        }
        let userPhone = "18899996666"
        let passWord = "test2021"
        async function zz() {
            let users = await http("/login", "post", { userPhone, passWord });
            console.log(users);
        }

        zz();

        $("#fileImg").change(function (e) {
            // 得到选中文件对象
            const files = e.target.files;
            // 创建一个表单对象，将文件添加到表单对象里面，让表单给我们传递
            const fd = new FormData()
            fd.append("file", files[0])
            // 发送请求需要用到ajax
            // console.log("测试");
            $.ajax({
                url: "/user/uploadImages",
                type: "POST",
                data: fd,
                contentType: false, //默认不设置请求类型，jquery发送ajax请求，默认给添加请求头
                processData: false,
                cache: false,  //请求的时候默认不缓存
                success(res) {
                    console.log("文件上传成功", res);
                    // console.log(res.message);
                    console.log(res.data);
                    $(".image-frame img").attr("src", `http://127.0.0.1:3000/${res.data}`);
                    $(".image-frame img").attr("src_Img", `${res.data}`);
                    $("#studentsAdd .content-info .right-info .del").show();
                }
            })
        })

        // 删除上传图片
        $(".right-info .del").on("click", async function () {
            console.log("删除测试");
            let imgurl = $(".image-frame img").attr("src_Img");
            let imageUrl = await http("/user/geturl", "post", { imgurl });
            console.log("." + imageUrl);
            // $(".image-frame img").attr("src", `../images/ae77121fec433f8b3afb254974df7061.jpeg`);
            // $(".image-frame img").attr("src_Img", `0`);
            $(".right-info .del").hide();
        })
    </script>
</body>

</html>